<template>
  <transition name="fade-opacity">
    <div class="c-pz101 c-maxw640 c-h c-pf c-p-l0 c-p-r0 c-p-b0 c-p-t0 c-marginauto c-flex-row c-justify-center c-aligni-end">
      <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="closeModal" data-type='cancel'></div>
      <transition name="fade-translate-y">
        <article class="c-w100 c-hh640 c-bg-white c-flex-column c-pz1 c-br-tl20 c-br-tr20 c-p">
          <div class="c-pa c-p-t24 c-p-r24">
            <div class="iconfont c-fc-gray c-fs32" @click="closeModal">&#xe6e1;</div>
          </div>
          <section class="c-pt24 c-bd-b1 c-mh24">
            <div class="c-flex-row c-aligni-center">
              <div class="c-ww150 c-maxh100 c-text-hidden c-br10">
                <img class="c-w100 c-br10" :src="$addXossFilter(cover, require('@/assets/defult270.png'))" alt=""/>
              </div>
              <div class="c-pl20 c-fs24 c-flex-grow1 c-w0 c-flex-column c-justify-sb c-hh92">
                <div class="c-fs28 c-fc-xblack c-fw600 c-text-ellipsis1">{{courseTitle}}</div>
                <div class="c-flex-row c-aligni-center">
                  <div class="c-fs22 theme-fc">{{'￥' | iosPriceFilter}}{{coursePrice}}</div>
                  <div class="c-fs22 c-fc-sblack c-ml24" v-if="isValid==1">长期有效</div>
                  <div class="c-fs22 c-fc-sblack c-ml24" v-else-if="validTime">{{validTime}}天有效</div>
                  <div class="c-fs22 c-fc-sblack c-ml24" v-else-if="isValid==2 && validAt">有效期至{{validAt.split(" ")[0]}}</div>
                </div>
              </div>
              <div class="c-ww70 c-hh12"></div>
            </div>
            <div class="c-flex-row c-aligni-center c-mt36 c-flexw-wrap">
              <div v-for="(item, index) in ladders" :key="index" class="c-w33 c-flex-column c-aligni-center c-mb30">
                <div class="c-fs26 theme-fc c-fw600 c-textAlign-c">{{'￥' | iosPriceFilter}}{{item.price}}</div>
                <div class="c-fs22 theme-fc c-textAlign-c">{{item.number}}</div>
              </div>
            </div>
          </section>

          <section class="c-flex-grow1 c-h0 c-contexty-auto c-ph24">
            <div class="c-flex-row c-aligni-center c-pv28">
              <div class="c-flex-grow1 c-w0 c-fs26 c-fw-b">团购数量
              </div>
              <div class="c-flex-row c-justify-sb c-aligni-center">
                <shop-number
                  :canInputMin='true'
                  :min='defultBuyNum'
                  :max="999"
                  :inputNum='defultBuyNum'
                  @subNum='subNum'
                  @addNum='addNum'
                  @inputChange='inputChange'
                  @finishInput='finishInput'
                ></shop-number>
              </div>
            </div>
            <div v-if="hasGift" class="c-fs22 c-fc-sblack">团购不参与礼包赠送活动</div>
          </section>
          <footer class="c-flex-row c-hh88 footer-shadow c-ph24 c-aligni-center">
            <div>
              <span class="c-fs22 theme-fc">{{'￥' | iosPriceFilter}}</span>
              <span class="c-fs28 theme-fc">{{Number(payPrice).toFixed(2)}}</span>
            </div>
            <div v-if="coursePrice * selectShopNum - payPrice > 0" class="c-fs22 c-fc-gray c-ml20 c-mt4">已减{{Number(coursePrice * selectShopNum - payPrice).toFixed(2)}}元</div>
            <div class="c-w0 c-flex-grow1"></div>
            <div @click="goPay" class="theme-bg c-fc-white c-fs22 c-ww240 c-hh64 c-flex-row c-flex-center c-br32">立即支付</div>
          </footer>
        </article>
      </transition>
    </div>
  </transition>
</template>

<script>
import ShopNumber from "@/components/templates/shopNumber.vue";
export default {
  components: {
    ShopNumber
  },
  props: {
  },
  data() {
    return {
      hasGift: false,
      defultBuyNum: 1,
      selectShopNum: 0,
      courseTitle: '123',
      coursePrice: 10,
      cover: "",
      ladders: [],
      payPrice: 0 //实际单个产品的价格
    };
  },
  activated() {
  },
  watch: {
    selectShopNum(val) {
      let perPrice = this.coursePrice;
      for (let i = 0; i < this.ladders.length; i++) {
        if (val >= this.ladders[i].minBuyNumber) {
          perPrice = Number(this.ladders[i].price)
        } else {
          break;
        }
      }
      this.payPrice = perPrice * val;
    },
  },
  methods: {
    //数量增加
    addNum(item) {
      this.selectShopNum = item.inputNumber;
    },
    //数量减少
    subNum(item) {
      this.selectShopNum = item.inputNumber;
    },
    //输入数量
    inputChange(item) {
      this.selectShopNum = item.inputNumber;
    },
    finishInput(item) {
      this.selectShopNum = item.inputNumber;
    },
    closeModal() {
      this.$emit('colseModal')
    },
    initData(gpInfo) {
      this.cover = gpInfo.cover;
      this.courseTitle = gpInfo.title;
      this.coursePrice = Number(gpInfo.coursePrice);
      this.ladders = gpInfo.ladders;
      this.isValid = gpInfo.isValid;
      this.validTime = gpInfo.validTime;
      this.validAt = gpInfo.validAt;
      this.defultBuyNum = gpInfo.defultBuyNum;
      this.selectShopNum = gpInfo.defultBuyNum;
      this.hasGift = gpInfo.hasGift;
    },
    goPay() {
      this.$emit('groupPurchasePay', this.selectShopNum)
    }
  },
};
</script>
<style scoped>
.c-marginauto {
  margin: auto;
}
.footer-shadow {
  box-shadow: 0 -2px 0 0 #F2F2F2;
}
</style>